<template>
<div class="tc-left pr10 fl">
    <ul class="clearfix uiTab1 mb5 j_outerHeight">
        <!-- <li class="col-md-3 fl uiTab1-active"><a href="javascript:">项</a></li> -->
    </ul>
    <div class="daily_title j_outerHeight">
        <ul class="clearfix">
            <li class="title_cur" data-title="全部">全</li>
            <!-- <li data-title="不超过10个字是不会出现的" data-title-length="10">S</li>
            <li data-title="我的背景色是蓝色的" data-title-color="#3385ff">Z</li>
            <li class="title_not_allowed">G</li>
            <li style="float:right;">D</li> -->
        </ul>
    </div>
    <div class="contentbox">
        <!-- <div class="dailyftSearch clearfix" v-if="souFlag" style="z-index:2"> -->
        <div class="dailyftSearch dailyftSearch1 clearfix hide" v-if="souFlag" style="z-index: 10; height: auto; display: block;">
            <div class="fl uiHas-textIcon">
                <input type="text" placeholder="卡号/状态" class="col-md-12 searchName" v-model="searchText"  @keyup.enter="_getCamerasListByRegionFn()">
                <i class="uiText-searchIcon bgIcon" @click="_getCamerasListByRegionFn()"></i>
            </div>
            <div class="fl mt5 proSelectBox plr10 mb5" style="width:100%;">
                <select v-model="cityInfo" @change="_getCamerasListByRegionFn()" class="width100">
                    <option value="">按地区筛选</option>
                    <option v-for="item in regionNames" :value="item" :key="item">{{ item.name }}</Option>
                </select>
            </div>
        </div>
        <table class="uiTable j_outerHeight">
            <thead>
                <tr>
                    <th width="30%">
                        <span class="serial_number" @click="souFlag = true">卡号<i class="bgIcon"></i></span>
                    </th>
                    <th width="20%">状态</th>
                    <th width="20%">地区</th>
                    <th width="15%">处理</th>
                </tr>
            </thead>
        </table>
        <div class="scroll-content thinScroll thinScroll-table" v-loading="loading" v-scrollHeight="36">
            <table class="uiTable uiTable-striped uiTable-hover" id="tab1">
                <tbody>
                    <tr v-for="(item,index) in leftListData" :key="index" :class="{'tractive':index == trIndex}" @click="siderBarTrclick(index,item)">
                        <td width="30%" :title="item.encode_device">{{ item.card }}</td>
                        <td width="20%">
                            <span v-if="item.state === 0">在线</span>
                            <span v-else-if="item.state === 1">不在线</span>
                            <span v-else>未检测</span>
                        </td>
                        <td width="20%">{{ item.region_name }}</td>
                        <td width="15%"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="j_outerHeight clearfix tj_bottom">
            <p class="col-md-3" data-title="全部">{{ leftListData.length }}</p>
            <p class="col-md-3 cGreen" data-title="正常">{{ deviceMap.get('normals') }}</p>
            <p class="col-md-3 cOrange" data-title="异常">{{ deviceMap.get('exceptions') }}</p>
            <p class="col-md-3 cRed" data-title="问题">0</p>
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { getCamerasListByRegion, selectRegionNameList } from '../../../branches/Department/Resources/Api/index'
export default {
    data () {
        return {
            loading: false,
            trIndex: 0,
            leftListData: [], // 遍历的数据
            leftListDataClone: [],
            souFlag: false, // 搜索是否显示
            searchText: '', // 搜索内容
            cityInfo: {}, // 地区名称搜索
            regionNames: [] // 地区信息
        }
    },
    created () {
        this._getCamerasListByRegionFn()
        this.getCityList()
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        selectFilter () {
            this.trIndex = 0
            // 搜索清空前后空格以及转化为大写
            // this.searchRegionText = this.searchRegionText.replace(/(^\s*)|(\s*$)/g, '').toUpperCase()
            // if (this.searchText === '在线' || this.searchText === '库存') {
            //     this.searchText = 0
            // } else if (this.searchText === '不在线' || this.searchText === '已出库') {
            //     this.searchText = 1
            // } else if (this.searchText === '已归库' || this.searchText === '未检测') {
            //     this.searchText = 2
            // }
            let searchReg = new RegExp(`^${this.searchRegionText}$`)
            if (!this.searchRegionText) searchReg = new RegExp(/[\s\S]*/)
            this.leftListData = this.leftListDataClone.filter(item => (
                searchReg.test(item.region_name)
            ))
            if (this.leftListData.length > 0) {
                this.siderBarTrclick(this.trIndex, this.leftListData[this.trIndex])
            }
            this.souFlag = false
        },
        getCityList () {
            selectRegionNameList().then((result) => {
                if (result.data.StatusCode === 0) {
                    result.data.Body.regionNameList.forEach(element => {
                        if (element.name.indexOf('城-') === -1) {
                            this.regionNames.push(element)
                        }
                    })
                }
            }).catch((err) => {
                console.log(`获取所有的地区名称,错误内容${err}`)
            })
        },
        /* 按分公司获取设备列表信息。 */
        _getCamerasListByRegionFn () {
            const cityId = Number(this.userInfo.as_diquId) === 39 ? 1 : this.userInfo.as_diquId
            let params = {
                region_id: JSON.stringify(this.cityInfo) !== '{}' ? Number(this.cityInfo.id) : cityId,
                area_id: 0,
                searchText: this.searchText
            }
            getCamerasListByRegion(params).then((result) => {
                if (result.data.StatusCode === 0) {
                    this.leftListDataClone = result.data.Body.orderList
                    this.leftListData = this.leftListDataClone
                    if (this.leftListData.length > 0) {
                        this.siderBarTrclick(this.trIndex, this.leftListData[this.trIndex])
                    }
                    this.selectFilter()
                }
            }).catch((err) => {
                console.log(`按分公司获取设备接口错误,错误内容${err}`)
            })
            this.souFlag = false
        },
        siderBarTrclick (index, item) {
            this.trIndex = index
            // 保存字段时 一定要确认公共字段一致
            this.setLeftData(item)
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        }
    },
    watch: {
        updateLeft () {
            this._getCamerasListByRegionFn()
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'updateLeft', 'userInfo']),
        deviceMap: function () {
            const deviceMap = new Map()
            let normals = 0
            let exceptions = 0
            for (let i = 0; i < this.leftListData.length; i++) {
                if (this.leftListData[i].state === 0) {
                    normals += 1
                } else {
                    exceptions += 1
                }
            }
            deviceMap.set('normals', normals).set('exceptions', exceptions)
            return deviceMap
        }
    }
}
</script>
